<template>
  <div class="login">
    <x-header @on-click-back="$router.push('/home')" :left-options="{preventGoBack: true}">登录</x-header>
    <div class="login-top">
      <i style="color:#EFA79B;" class="icon-paotui"></i>
      <span>来人呐</span>
    </div>
    <group class="user-info">
      <x-input ref="phoneValid" autocomplete="off" title="手机号" v-model="phone" name="mobile" placeholder="请输入手机号码" keyboard="number" :is-type="phone==='8888'?'':'china-mobile'">
        <i class="icon-zhucedenglushoujihao register-icon" slot="label" style="padding-right:10px;display:block;"></i>
      </x-input>
      <x-input placeholder="请输入验证码" autocomplete="off" v-if="showCode" v-model="code" title="验证码" class="weui-vcode">
        <i class="icon-yanzhengma register-icon" slot="label" style="padding-right:10px;display:block;"></i>
        <span slot="right" v-if="sendMsgDisabled">{{`${time}s`}}</span>
        <x-button class="sendcode-btn" slot="right" type="primary" mini v-else @click.native="handleValidateCode">发送验证码</x-button>
      </x-input>
      <x-input autocomplete="new-password" title="密 码" v-else type="password" v-model="password" placeholder="请输入密码">
        <i class="icon-zhucedenglumima register-icon" slot="label" style="padding-right:10px;display:block;"></i>
      </x-input>
    </group>
    <div class="code-login">
      <span style="color:#526a75" @click="showCode=!showCode">{{showCode?'账号密码登录':'短信验证码登录'}}</span>
    </div>
    <div class="btn-box">
      <span style="background:#EFA79B;color:#ffffff;" class="login-btn" @click="handleLogin">登录</span>
    </div>
    <div class="edit-btns">
      <span style="color:#EFA79B" @click="$router.push('/forgetpassword')">忘记密码</span>
      <span style="color:#dcdcdc;padding:0 10px;">|</span>
      <span style="color:#EFA79B" @click="$router.push('/register')">立即注册</span>
    </div>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { XInput, Group, XHeader, XButton } from 'vux';
const IndexStore = namespace('login');
const MineStore = namespace('mine');

@Component({
  components: { XInput, Group, XHeader, XButton }
})
export default class Login extends Vue {
  @IndexStore.Action getLogin
  @IndexStore.Action getValidateCode
  @IndexStore.Action getLoginValidateCode
  @IndexStore.State login
  @IndexStore.State loginValidateCode
  @MineStore.Action getMyLikePosts
  @MineStore.Action getMyWatch
  showCode = false
  phone = ''
  code = ''
  password = ''
  sendMsgDisabled = false
  time = 60
  send () {
    this.sendMsgDisabled = true
    let interval = window.setInterval(() => {
      if ((this.time--) <= 0) {
        this.time = 60
        this.sendMsgDisabled = false
        window.clearInterval(interval)
      }
    }, 1000)
  }
  handleValidateCode () {
    let flag = true
    const phoneValid = this.$refs.phoneValid.valid
    if (!phoneValid) {
      flag = false
      this.$vux.toast.text('手机号码格式不正确', 'middle')
    }
    if (!this.phone) {
      flag = false
      this.$vux.toast.text('请输入手机号码', 'middle')
    }
    if (flag) {
      const params = {
        tel: this.phone
      }
      this.getLoginValidateCode(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('获取验证码成功', 'middle');
          this.code = ''
          this.send()
        }
      })
    }
  }
  handleLogin () {
    let flag = true
    const phoneValid = this.$refs.phoneValid.valid
    if (!this.showCode && !this.password) {
      flag = false
      this.$vux.toast.text('请输入密码', 'middle')
    }
    if (this.showCode && !this.code) {
      flag = false
      this.$vux.toast.text('请输入验证码', 'middle')
    }
    if (!phoneValid) {
      flag = false
      this.$vux.toast.text('手机号码格式不正确', 'middle')
    }
    if (!this.phone) {
      flag = false
      this.$vux.toast.text('请输入手机号码', 'middle')
    }
    if (flag) {
      const params = {
        tel: this.phone,
        passwd: this.password,
        code: this.code
      }
      this.showCode ? delete params.passwd : delete params.code
      this.getLogin(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle')
        } else {
          this.$vux.toast.text('登录成功', 'middle')
          localStorage.setItem('loginInfo', JSON.stringify(this.login))
          this.getMyLikePosts()
          this.getMyWatch()
          this.$router.push({
            path: '/'
          })
        }
      })
    }
  }
}
</script>
<style lang="less">
  .login {
    height: 100%;
    width: 100%;
    padding-top: 46px;
    background: #ffffff;
    .register-icon {
      font-size: 24px;
      padding-left: 10px;
    }
    .sendcode-btn {
      background-color: #ffffff;
      color: #999999;
      line-height: 28px !important;
    }
    .sendcode-btn:after {
      border-radius: 30px;
      border-color: rgb(239, 167, 155);
    }
    .weui-icon-warn{
      color:#EFA79B;
    }
    .weui-cell {
      height: 29px;
    }
    .login-top {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
      i {
        font-size: 80px !important;
      }
      span {
        font-size: 30px;
        color: #666666;
        margin-left: 10px;
      }
    }
    .edit-btns {
      width: 80%;
      margin: 0 auto;
      // font-size: 12px;
      text-align: center;
    }
    .code-login {
      text-align: right;
      padding: 10px;
      // font-size: 12px;
    }
    .btn-box {
      margin-top: 30px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .login-btn {
      border-radius: 40px;
      padding: 6px 40%;
      font-size: 14px;
    }
  }
</style>
